<template>
  <div class="resoTab">
    <div
      v-for="(item, index) in tabs"
      :key="item.index"
      class="tab-item"
      :class="{ active: index === active }"
      @click="tabSwitch(item, index)"
    >
      {{item.value}}
    </div>
    <div class="tab-swipe" :style="{ left: swipePos }"></div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
    },
    curTab: {
      type: Object
    }
  },
  data() {
    return {
      active: this.tabs.findIndex(t => t.name === this.curTab.name),
    };
  },
  computed: {
    swipePos() {
      let pos = this.active * 160 + 55;
      return (pos * 100) / 1920 + "vw";
    },
  },
  methods: {
    tabSwitch(item, index) {
      this.active = index;
      //this.active = item.key
      this.$emit("activeIndex", item);
      this.$store.commit("setState", {
        name: "currentResTab",
        value: item,
      });
    },
  },
};
</script>

<style lang="stylus">
.resoTab {
  padding-bottom:getPx(40);
  max-width: getPx(200);
  overflow-y:auto;
  // overflow-x: auto;
  float: left;
  display: inline;
  height: getPx(782);
  margin: getPx(18) getPx(18) getPx(18) getPx(16);
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;

  @media all and (max-height: $h) {
    height: getPx(710);
  }

  // position: relative;
  // color: $txt-color;
  // flexMiddle(center);
  .tab-item {
    margin-top: getPx(33);
    width: getPx(160);
    cursor: pointer;
    font-size: getPx(18);
    text-align: center;
    letter-spacing: getPx(2);
    color: $primary;

    &.active {
      font-size: getPx(20);
      font-weight: bold;
      background-color: #f5e5e5;
      line-height: getPx(50);
      border-radius: getPx(50) 0 0 getPx(50);
    }
    &:last-child .tab-item{
      margin-bottom: getPx(50);
    }
  }

  .media-list {
    display: inline;

    &.el-scrollbar__wrap {
      margin-left: getPx(20);
      margin-top: getPx(-2);
    }
  }

  .tab-swipe {
    // width: getPx(50);
    height: getPx(6);
    background: $primary;
    border-radius: getPx(3);
    position: absolute;
    left: getPx(55);
    bottom: 0;
    transition: all $trans-time;
  }
}
</style>